<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<div id="menu" class="st">
	<div id="navMenu">
		<a href="Login.jsp?logout=true">Logout</a>
		<a href="Planning.jsp">Planning</a>
		<a href="Task.jsp">Board</a>
	</div>
	<img src="css/logo.png" width="300" height="58">
</div>



<style type="text/css">
#chatConteiner {
	position: fixed;
	z-index: 10;
	left: 10px;
	top: 300px;
	margin-top: 0px;
	margin-left: 0px;
}

#chatBorder {
	z-index: 100;
	height: 20px;
	background-color: black;
}

#expandChatButton {
	z-index: 100;
	left: 0px;
	top: 100%;
	margin-top: -25px;
	background-color: #87cefa;
	position: fixed;
	visibility: hidden;
}

iframe {
	z-index: 10;
	border: 0px;
	border-radius: 20px 20px 20px 20px;
	padding: 10px 10px 10px 10px;
}
</style>
<script type="text/javascript">
var x;
var y;
var isMove=false;
function saveCoord(event){
	x=event.clientX;
	y=event.clientY;
}

document.addEventListener("mousemove",saveCoord);

function moveChat(chat, event){
	if(isMove){
		chat.style.top=chat.offsetTop+(event.clientY-y)+"px";
		chat.style.left=chat.offsetLeft+(event.clientX-x)+"px";
		x=event.clientX;
		y=event.clientY;
	}
}


HTMLDivElement.prototype.ht=-1;
HTMLDivElement.prototype.st=-1;
HTMLDivElement.prototype.opacity=0.4;

function hideChat(){
	var chat=document.getElementById("chatConteiner");
	chat.ht=setInterval(function(){
		if((chat.opacity>0)){
			chat.opacity-=0.1;
			chat.style.opacity=chat.opacity;
		}else {
			clearInterval(chat.ht);
			chat.style.visibility="hidden";
		}
	},50);
	document.getElementById("expandChatButton").style.visibility="visible";
};
function showChat(){
	var chat=document.getElementById("chatConteiner");
	chat.style.visibility="visible";
	chat.st=setInterval(function(){
		if((chat.opacity<1)){
			chat.opacity+=0.1;
			chat.style.opacity=chat.opacity;
		}else{
			clearInterval(chat.st);
		}
	},50);
	document.getElementById("expandChatButton").style.visibility="hidden";
};
</script>
<button id="expandChatButton" onclick="showChat();">chat</button>
<div id="chatConteiner" onmousemove="moveChat(this, event);"
	onmousedown="isMove=true;" onmouseup="isMove=false;">
	<div id="chatBorder">
		<button onclick="hideChat();">__</button>
	</div>
	<iframe width="300" height="200" src="Chat.html" seamless="seamless"></iframe>
</div>